<template>
	<div class="chatbox">
		<el-card class="chatcard" shadow="hover">
			<div slot="header" class="clearfix">
				<i v-if="botOrUser == '用户问题'" class="el-icon-user-solid"></i>
				<i v-else class="el-icon-s-platform"></i>
				<!-- <img v-if="botOrUser == '用户问题'" src="../assets/logo.png" alt>
				<img v-else src="../../assets/" alt> -->
				<span v-if="botOrUser == '用户问题'">用户问题</span>
				<span v-else>诊断机器人回复</span>
			</div>
			<div class="mainChat">
				<div v-if="botOrUser == '用户问题'">
					{{curMsg}}
				</div>
				<div v-else>{{curMsg}}</div>

			</div>
			<el-button v-if="allLongMsg.length > 200" @click="dialogVisible = true">show all</el-button>
		</el-card>
		<el-dialog title="完整信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<div>{{allLongMsg}}</div>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'chatBox',
		data() {
			return {
				botOrUser: "",
				curMsg: "",
				allLongMsg: "",
				dialogVisible: false
			}
		},
		props: {
			chatboxMsg: ""
		},
		mounted() {
			const _this = this;
			var str = _this.chatboxMsg;
			if (str.includes("用户问题")) {
				_this.botOrUser = "user";
				const msgrrary = _this.chatboxMsg.split("::");
				_this.botOrUser = msgrrary[0];
				if (msgrrary[1].length >= 300) {
					_this.curMsg = msgrrary[1].substring(0, 200) + "...";
				} else {
					_this.curMsg = msgrrary[1];
				}
				_this.allLongMsg = msgrrary[1];
			} else {
				_this.botOrUser = "bot";
				if (str.length >= 300) {
					_this.allLongMsg = str;
					_this.curMsg = str.substring(0, 200) + "...";
				} else {
					_this.curMsg = str;
				}
			}
			// alert(_this.chatboxMsg);
		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			showAll() {

			}
		}
	}
</script>

<style>
	.chatbox {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		/* 每个对话card的间距 */
		padding-bottom: 15px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.el-card .el-card__header {
		padding: 2px 10px;
		background-color: #4dc874;
	}

	.chatcard {
		padding: 5px;
		width: 1250px;
		height: 175px;
	}

	.mainChat {
		display: flex;
		width: 1200px;
	}
	.el-card__body, .el-main {
	    padding: 20px;
	    width: 1240px;
	}
</style>
